<template>
  <div class="main">
    <el-card shadow="never" class="nav">
      <!-- <el-input v-model="productCode" style="width: 250px;" placeholder="搜索产品代号" @change="handleSearchChange" /> -->
      <el-button type="primary" icon="el-icon-plus" @click="addProduct">添加产品</el-button>
      <el-button :disabled="originTableData.length === 0" type="primary" :icon="downloadLoading ? 'el-icon-loading' : 'el-icon-document'" @click="handleDownload">导出Excel</el-button>
    </el-card>
    <el-table :header-cell-style="{ backgroundColor: '#f2f3f5', borderColor: '#C0C4CC', color: '#409EFF', userSelect: 'text' }" :data="tableData" border style="width: 100%">
      <el-table-column align="center" prop="productName" label="产品名称" min-width="105px" />
      <el-table-column align="center" prop="productCode" label="产品代号" min-width="105px" />
      <el-table-column align="center" label="尺寸参数">
        <el-table-column label-class-name="important" class-name="important" align="center" prop="productD" label="产品外径" min-width="105px" />
        <el-table-column label-class-name="important" class-name="important" align="center" prop="wjPos" label="外径测量位置" min-width="145px" />
        <el-table-column label-class-name="important" class-name="important" align="center" prop="cskP" label="出水口位置" width="125" />
        <el-table-column align="center" prop="hbmL" label="滑板面长度" width="125" />
        <el-table-column align="center" prop="hbmW" label="滑板面宽度" width="125" />
        <el-table-column align="center" prop="hbmH" label="滑板面厚度" width="125" />
        <el-table-column align="center" prop="cskL" label="出水口长度" width="125" />
        <el-table-column align="center" prop="cskW" label="出水口宽度" width="125" />
        <el-table-column align="center" prop="holeD" label="内孔直径" min-width="105px" />
        <el-table-column align="center" prop="holeL" label="内孔深度" min-width="105px" />
        <el-table-column align="center" prop="productL" label="产品总长" min-width="105px" />
        <el-table-column align="center" prop="safePosition" label="安全距离" min-width="105px" />
      </el-table-column>
      <el-table-column align="center" label="工艺参数">
        <el-table-column align="center" prop="tolerance" label="误差要求" min-width="105px" />
      </el-table-column>
      <el-table-column align="center" prop="totalNum" label="生产总数" min-width="105px" />
      <el-table-column align="center" prop="totalOk" label="OK 总数" min-width="105px" />
      <el-table-column align="center" prop="totalNg" label="NG 总数" min-width="105px" />
      <el-table-column align="center" prop="totalElse" label="其他总数" min-width="105px" />
      <el-table-column align="center" prop="isCheck" label="是否使用" min-width="105px" />
      <el-table-column
        fixed="right"
        label="操作"
        width="80"
        align="center"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="editProduct(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page.sync="currentPage"
      :page-sizes="[10, 20, 50]"
      :page-size.sync="pageSize"
      style="float: right;margin-top: 10px;"
      layout="total, sizes, prev, pager, next"
      :total="totalCounts"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <el-dialog width="60%" :close-on-click-modal="false" :title="dialogTitle" :visible.sync="dialogFormVisible" @closed="handleDialogFormClosed">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form ref="productForm" :model="productForm" label-width="145px">
            <el-form-item v-for="item in productFields" :key="item.value" :prop="item.value" :rules="item.rules || []" :label="item.label">
              <el-input v-model="productForm[item.value]" style="width: 90%;" />
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12">
          <div class="bg" />
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmAdd">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getProductList, saveProduct } from '@/api/product'
import { productFields } from '@/utils/constant'
export default {
  name: 'Product',
  data() {
    return {
      productFields: productFields,
      tableData: [],
      originTableData: [],
      currentPage: 1,
      pageSize: 10,
      totalCounts: 0,
      productCode: '',
      productForm: {
        productName: '',
        productCode: '',
        hbmL: '',
        hbmW: '',
        hbmH: '',
        cskL: '',
        cskW: '',
        cskP: '',
        holeD: '',
        holeL: '',
        productL: '',
        productD: '',
        safePosition: '',
        tolerance: '5',
        wjPos: ''
      },
      dialogTitle: '',
      dialogFormVisible: false,
      downloadLoading: false
    }
  },
  created() {
    this.getProductList()
  },
  methods: {
    getProductList() {
      getProductList().then(res => {
        this.originTableData = res
        this.totalCounts = this.originTableData.length
        this.currentPage = 1
        this.handleCurrentChange(1)
      })
    },
    handleSizeChange(size) {
      this.currentPage = 1
      this.handleCurrentChange(1)
    },
    handleCurrentChange(page) {
      this.tableData = this.originTableData.slice((page - 1) * this.pageSize, page * this.pageSize)
    },
    // handleSearchChange(val) {
    //   if (val.trim() === '') {
    //     this.getProductList()
    //   }
    // },
    editProduct(row) {
      this.dialogTitle = '修改产品'
      this.productForm = { ...row }
      this.dialogFormVisible = true
    },
    handleDialogFormClosed() {
      this.productForm = {
        productName: '',
        productCode: '',
        hbmL: '',
        hbmW: '',
        hbmH: '',
        cskL: '',
        cskW: '',
        cskP: '',
        holeD: '',
        holeL: '',
        productL: '',
        productD: '',
        safePosition: '',
        tolerance: '5',
        wjPos: ''
      }
      this.$refs.productForm.resetFields()
    },
    addProduct() {
      this.dialogTitle = '添加产品'
      this.dialogFormVisible = true
    },
    confirmAdd() {
      this.$refs.productForm.validate(valid => {
        if (valid) {
          saveProduct(this.productForm).then(res => {
            this.$message({
              type: 'success',
              message: this.dialogTitle + '成功!'
            })
            this.getProductList()
            this.dialogFormVisible = false
          })
        } else {
          this.$message({
            type: 'error',
            message: '请检查输入内容'
          })
          return false
        }
      })
    },
    handleDownload() {
      this.downloadLoading = true
      const headerMap = {
        '产品名称': 'productName',
        '产品代号': 'productCode',
        '产品外径': 'productD',
        '外径测量位置': 'wjPos',
        '出水口位置': 'cskP',
        '滑板面长度': 'hbmL',
        '滑板面宽度': 'hbmW',
        '滑板面厚度': 'hbmH',
        '出水口长度': 'cskL',
        '出水口宽度': 'cskW',
        '内孔直径': 'holeD',
        '内孔深度': 'holeL',
        '产品总长': 'productL',
        '安全距离': 'safePosition',
        '误差要求': 'tolerance',
        '生产总数': 'totalNum',
        'OK 总数': 'totalOk',
        'NG 总数': 'totalNg',
        '其他总数': 'totalElse',
        '是否使用': 'isCheck'
      }
      const header = Object.keys(headerMap)
      const multiHeader = [['产品名称', '产品代号', '尺寸参数', '', '', '', '', '', '', '', '', '', '', '', '	工艺参数', '生产总数', 'OK 总数', 'NG 总数', '其他总数', '是否使用']]
      const merges = ['A1:A2', 'B1:B2', 'C1:N1', 'O1:O1', 'P1:P2', 'Q1:Q2', 'R1:R2', 'S1:S2', 'T1:T2']
      const data = this.originTableData.map(item => header.map(v => item[headerMap[v]]))
      import('@/utils/Export2Excel').then(excel => {
        excel.export_json_to_excel({
          header,
          data,
          filename: '产品列表',
          multiHeader,
          autoWidth: true,
          bookType: 'xlsx',
          merges
        })
        setTimeout(() => {
          this.downloadLoading = false
        }, 500)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  padding: 20px;
}
.el-table {
  border-color: #C0C4CC;
  border-bottom: 1px solid #C0C4CC;
  ::v-deep {
    th>.cell {
      font-size: 20px;
    }
    td>.cell {
      font-size: 18px;
    }
    .important {
      background-color: rgb(253, 226, 226) !important;
    }
  }
}
.el-pagination {
  ::v-deep {
    .el-pagination__total, i.el-icon  {
      font-size: 18px;
    }
    .el-input__inner {
      font-size: 16px;
    }
    .el-pager li {
      font-size: 18px;
    }
  }
}
.nav {
  height: 50px;
  border: none;
  transform: translateY(-8px);
  ::v-deep {
    .el-card__body {
      padding: 0px;
      height: 100%;
      line-height: 50px;
      padding-right: 20px;
    }
  }
}
.bg {
  height: 500px;
  background-image: url(../../assets/image/add_product.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}
</style>
